<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>

</head>

<body>
    <div id="root">
        <!-- 
            Vue.set
         -->

        <h2>name:{{name}}</h2>
        <h2>age:{{age}}</h2>

        <h2>队友信息</h2>
        <button @click="addSex">添加一个性别属性，默认值是男</button>
        <h2 v-if="teammate.sex">性别：{{teammate.sex}}</h2>
        <ul>
            <li v-for='(f,index) in teammate.friends' :key="index">
                {{f.name}} -- {{f.age}}
            </li>
        </ul>

    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                name:'SONG',
                age:18,
                songs:{
                    name:'LHC',
                    time:{
                        beforeTime:'2019',
                        afterTime:'2022'
                    }
                },
                teammate:{
                    name:'LIU',
                    age:{
                        rAge:15,
                        sAge:16
                    },
                    friends:[
                        {name:'MA',age:19},
                        {name:'DING',age:21}
                    ]
                }
            },
            methods: {
                addSex(){
                     Vue.set(this.teammate,'sex','男')
                }
            },


        })
    </script>
</body>

</html>


